<template>
    <div class="warp-2" style="height: 100%;" ref="scroll">
            <navbar :title="gradeMapTitle"></navbar>
            <div style="left: 0%; width: 100%; height: calc(100% - 56px); position: relative;margin-top: 56px; ">
                <!-- 第一张地图固定 -->
                <div class="nodelist-map" :style="{top: (85 * (nodelist.length)) + '%'}" v-if="loadingFinsh">
                    <div class="bg-box" style="top: 0%;">
                        <img src="./images/bg-04.png" style="width: 100%;height: 100%;" alt=""/>
                        <!-- 第一栋房 -->
                        <div class="house1" style="position: absolute; left: 52.815%; bottom: 4.625%; width: 28%; height: 15%; display: block; cursor: pointer;">
                            <img src="./images/house01.png" alt="" class="house_bg" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; display: block;"/>
                            <img src="./images/progress.png" class="nodelist-house01-progress-ico" v-if="firstNode.length > 0 && !firstNode[0].isFinshAllCourse"/>
                            <img src="./images/finish.png" class="nodelist-house01-progress-ico" v-if="firstNode.length > 0 && firstNode[0].isFinshAllCourse"/>
                        </div>
                        <!-- 第二栋房 -->
                        <div class="house2" style="position: absolute; left: 38.815%; bottom: 37%; width: 33%; height: 19%; display: block; cursor: pointer;">
                            <img src="./images/house02.png" alt="" class="house_bg" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; display: block;"/>
                            <img src="./images/progress.png" class="nodelist-house01-progress-ico nodelist-house02-progress-ico"
                                 v-if="firstNode.length > 1 && !firstNode[1].isFinshAllCourse"/>
                            <img src="./images/finish.png" class="nodelist-house01-progress-ico nodelist-house02-progress-ico"
                                 v-if="firstNode.length > 1 && firstNode[1].isFinshAllCourse"/>
                        </div>
                        <!-- 第三栋房 -->
                        <div class="house3" style="position: absolute; left: 1.625%; top: 4%; width: 34%; height: 20%; display: block; cursor: pointer;z-index:1;">
                            <img src="./images/house03.png" alt="" class="house_bg" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; display: block;"/>
                            <img src="./images/progress.png" class="nodelist-house01-progress-ico nodelist-house03-progress-ico"
                                 v-if="firstNode.length > 2 && !firstNode[2].isFinshAllCourse"/>
                            <img src="./images/finish.png" class="nodelist-house01-progress-ico nodelist-house03-progress-ico"
                                 v-if="firstNode.length > 2 && firstNode[2].isFinshAllCourse"/>
                        </div>
                        <!-- 第一个职级 -->
                        <div class="nodelist-module-box-01" v-if="firstNode.length > 0">
                            <span class="nodelist-module-box-title">{{ firstNode[0].ugrDisplayBil }}</span>
                            <div class="button-box" @click="enterDetail(firstNode[0])">
                                <div class="button-box-desc">{{$t('lab_start_learning')}}</div>
                                <em class="button-box-arrow"></em>
                            </div>
                        </div>
                        <!-- 第二个职级 -->
                        <div class="nodelist-module-box-02" v-if="firstNode.length > 1">
                            <span class="nodelist-module-box-title">{{ firstNode[1].ugrDisplayBil }}</span>
                            <div class="button-box" @click="enterDetail(firstNode[1])">
                                <div class="button-box-desc">{{$t('lab_start_learning')}}</div>
                                <em class="button-box-arrow"></em>
                            </div>
                        </div>
                        <!-- 第三个职级 -->
                        <div class="nodelist-module-box-03" v-if="firstNode.length > 2">
                            <span class="nodelist-module-box-title">{{ firstNode[2].ugrDisplayBil }}</span>
                            <div class="button-box" @click="enterDetail(firstNode[2])">
                                <div class="button-box-desc">{{$t('lab_start_learning')}}</div>
                                <em class="button-box-arrow"></em>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 动态生成衔接地图模块 -->
                <div class="nodelist-map" :style="{top: (85 * (nodelist.length - index - 1)) + '%'}" v-for="(node, index) in nodelist" :key="index" v-if="loadingFinsh && nodelist">
                    <div class="bg-box" style="top: 0%;">
                        <img src="./images/bg-05.png" style="width: 100%;height: 105%;" :style="{'z-index': (nodelist.length - index) + ''}" alt=""/>
                    </div>
                    <!-- 第一栋房 -->
                    <div class="house4" style="position: absolute; left: 59.815%; bottom: 8.615%; width: 23%; height: 12%; display: block; cursor: pointer;">
                        <img src="./images/house01.png" alt="" class="house_bg" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; display: block;"/>
                        <img src="./images/progress.png" class="nodelist-house01-progress-ico nodelist-house04-progress-ico"
                             v-if="node.length > 0 && !node[0].isFinshAllCourse"/>
                        <img src="./images/finish.png" class="nodelist-house01-progress-ico nodelist-house04-progress-ico"
                             v-if="node.length > 0 && node[0].isFinshAllCourse"/>
                    </div>
                    <!-- 第二栋房 -->
                    <div class="house2" style="position: absolute; left: 38.815%; bottom: 39.3%; width: 33%; height: 19%; display: block; cursor: pointer;">
                        <img src="./images/house02.png" alt="" class="house_bg" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; display: block;"/>
                        <img src="./images/progress.png" class="nodelist-house01-progress-ico nodelist-house02-progress-ico"
                             v-if="node.length > 1 && !node[1].isFinshAllCourse"/>
                        <img src="./images/finish.png" class="nodelist-house01-progress-ico nodelist-house02-progress-ico"
                             v-if="node.length > 1 && node[1].isFinshAllCourse"/>
                    </div>
                    <!-- 第三栋房 -->
                    <div class="house3" style="position: absolute; left: 1.625%; top: 4.625%; width: 34%; height: 20%; display: block; cursor: pointer;z-index:1;">
                        <img src="./images/house03.png" alt="" class="house_bg" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; display: block;"/>
                        <img src="./images/progress.png" class="nodelist-house01-progress-ico nodelist-house03-progress-ico"
                             v-if="node.length > 2 && !node[2].isFinshAllCourse"/>
                        <img src="./images/finish.png" class="nodelist-house01-progress-ico nodelist-house03-progress-ico"
                             v-if="node.length > 2 && node[2].isFinshAllCourse"/>
                    </div>
                    <!-- 第一个职级 -->
                    <div class="nodelist-module-box-04" v-if="node.length > 0">
                        <span class="nodelist-module-box-title">{{ node[0].ugrDisplayBil }}</span>
                        <div class="button-box" @click="enterDetail(node[0])">
                            <div class="button-box-desc">{{$t('lab_start_learning')}}</div>
                            <em class="button-box-arrow"></em>
                        </div>
                    </div>
                    <!-- 第二个职级 -->
                    <div class="nodelist-module-box-05" v-if="node.length > 1">
                        <span class="nodelist-module-box-title">{{ node[1].ugrDisplayBil }}</span>
                        <div class="button-box" @click="enterDetail(node[1])">
                            <div class="button-box-desc">{{$t('lab_start_learning')}}</div>
                            <em class="button-box-arrow"></em>
                        </div>
                    </div>
                    <!-- 第三个职级 -->
                    <div class="nodelist-module-box-06" v-if="node.length > 2">
                        <span class="nodelist-module-box-title">{{ node[2].ugrDisplayBil }}</span>
                        <div class="button-box" @click="enterDetail(node[2])">
                            <div class="button-box-desc">{{$t('lab_start_learning')}}</div>
                            <em class="button-box-arrow"></em>
                        </div>
                    </div>
                </div>
            </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin';
export default {
    name: 'Nodelist',
    mixins: [mixin],
    data() {
        return {
            nodelist: [[]],
            firstNode: [], //抽取第一个特殊节点
            courseListShow: false,
            nodeTitle: '',
            courseList: [],
            total: 0,
            onFetching: false, //滚动到底部
            pageNo: 1, //分页页码
            permissionDeniedTips: false, //暂无权限
            loadingFinsh: false,
            gradeMapTitle: '',
            isLoading: true
        };
    },
    methods: {
        init() {
            //获取地图下的职级
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/grade-map/nodeList?pfsId=' + this.$route.params.id
            }).then(res => {
                if (res.data) {
                    if (res.data.length < 3) {
                        this.firstNode = res.data;
                        this.nodelist = [];
                    } else {
                        //抽出三条数据作为第一个固定地图数据加载
                        this.firstNode[0] = res.data[0];
                        this.firstNode[1] = res.data[1];
                        this.firstNode[2] = res.data[2];
                        res.data.splice(0, 3);
                        //将数据按照3条记录为一个数组
                        let x = 0;
                        let y = 0;
                        for (let i = 0; i < res.data.length; i++) {
                            if (i !== 0 && i % 3 === 0) {
                                x++;
                                y = 0;
                                this.nodelist[x] = [];
                            }
                            this.nodelist[x][y] = res.data[i];
                            y++;
                        }
                    }
                    this.loadingFinsh = true;
                }
                // this.$nextTick(function() {
                //     this.$refs.viewBox.scrollTo(this.nodelist.length * 600);
                // });
                this.isLoading = false;
            });
        },
        enterDetail(node) {
            //跳转
            let pfsId = this.wbEncryptor(node.pfsId);
            let psiUgrId = this.wbEncryptor(node.ugrEntId);
            window.sessionStorage.setItem('nodeTitle', node.ugrDisplayBil);
            this.$router.push({ name: 'courseList', params: {pfsId: node.pfsId, psiUgrId: node.ugrEntId} });
        }
    },
    mounted() {
        this.init();
        this.gradeMapTitle = window.sessionStorage.getItem('gradeMapTitle');
    }
};
</script>

<style scoped lang="less">
    .warp-2 {
        background-color: #373C45;
    }
    .title {
        width: 70%;
        margin: 0 auto;
    }
    .bg-box {
        position: absolute;
        left: 0%;
        width: 100%;
        height: 100%;
    }
    .nodelist-module-box-01,.nodelist-module-box-02,.nodelist-module-box-03,.nodelist-module-box-04,.nodelist-module-box-05,.nodelist-module-box-06 {
        position: absolute;
        left: 21.815%;
        bottom: 20.625%;
        width: 50%;
        display: block;
        .nodelist-module-box-title {
            color: white;
            font-size: 15px
        }
        .button-box {
            width: 50%;
            height: 34px;
            background: #1f53cc;
            color: #ffffff;
            border-radius: 4px;
            position: relative;
            top: 12px;
            display:flex;
            justify-content: center;
            align-items: center;
            .button-box-desc {
                font-size: 12px;
            }
            .button-box-arrow {
                width: 0;
                height: 0;
                border-top: 5px solid transparent;
                border-left: 5px solid #1F53CC !important;
                border-bottom: 5px solid transparent;
                position: absolute;
                right: -4px;
                top: 36%;
            }
        }
    }
    .nodelist-module-box-02 {
        left: 4.815%;
        bottom: 50.625%;
    }
    .nodelist-module-box-03, .nodelist-module-box-06 {
        left: 49.815%;
        bottom: 75.625%;
        z-index: 1;
        .button-box{
            .button-box-arrow {
                width: 0;
                height: 0;
                border-top: 5px solid transparent;
                border-right: 5px solid #1F53CC;
                border-left: 0px solid transparent !important;
                border-bottom: 5px solid transparent;
                position: absolute;
                left: -4px;
                top: 36%;
            }
        }
    }
    .nodelist-map {
        position: absolute;
        left: 0%;
        width: 100%;
        height: 100%;
        display: block;
    }
    .nodelist-module-box-04 {
        bottom: 21.625%;
    }
    .nodelist-module-box-05 {
        left: 4.815%;
        bottom: 52.625%;
    }
    .nodelist-module-box-06 {
        bottom: 79.625%;
    }
    .nodelist-house01-progress-ico {
        position: absolute;
        left: 35%;
        top: -14%;
        display: block;
        width: 27px;
        height: 37px;
        z-index: 1;
    }
    .nodelist-house02-progress-ico {
        left: 74%;
        top: 3%;
    }
    .nodelist-house03-progress-ico {
        left: 36%;
    }
    .nodelist-house04-progress-ico {
        left: 35%;
        top: -20%;
    }
</style>
